<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据菜单名称查找"
                suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <!-- <div style="margin:10px 0;">
            <el-button type="primary" @click="handAddParent">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        </div> -->

        <el-table :data="tableData" row-key="id" default-expand-all style="max-height: 500px;overflow: auto;">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="path" label="路径">
            </el-table-column>
            <el-table-column prop="pagePath" label="页面路径">
            </el-table-column>
            <el-table-column label="图标" label-class-name="fontSize12">
                <template slot-scope="scope">
                    <i :class="scope.row.icon" style="font-size: 18px;" />
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" width="200">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleAddSon(scope.row.id)"
                        v-if="!scope.row.pid && !scope.row.path">新增子菜单<i class="el-icon-plus"></i></el-button>
                    <el-button type="success" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='我在想想'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="deleteById(scope.row.id)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增菜单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="名称" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="路径" label-width="120px">
                    <el-input v-model="form.path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="页面路径" label-width="120px">
                    <el-input v-model="form.pagePath" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="120px">
                    <template slot-scope="scope">
                        <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
                            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
                                <i :class="item.value" /> {{ item.name }}
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="描述" label-width="120px">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="顺序" label-width="120px">
                    <el-input v-model="form.sortNum" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    name: "Menu",
    data() {
        return {
            tableData: [],
            input: '',
            dialogFormVisible: false,
            form: '',
            imageUrl: '',
            menuData: [],
            options: []
        }
    },
    created() {
        this.load();
    },
    methods: {
        cancelDialog() {
            this.dialogFormVisible = false;
            this.imageUrl = '';
        },
        deleteById(id) {
            this.request.delete(`/menu/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        save() {//新增提交数据方法
            console.log(this.form);
            this.request.post("/menu", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.dialogFormVisible = false
            this.load();
        },
        handleEdit(row) {//打开编辑窗口
            this.form = row
            this.dialogFormVisible = true;
        },
        handleAddSon(pid) {//打开新增子菜单窗口
            this.dialogFormVisible = true;
            this.form = {};
            if (pid) {
                this.form.pid = pid;
            }
        },
        handAddParent() {//打开新增父菜单窗口
            this.dialogFormVisible = true;
            this.form = {};
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            this.request.get("/menu", {
                params: {
                    name: this.input
                }
            }).then(res => {
                this.tableData = res.data;
            })
            this.getIcons()
        },
        getIcons() {//获取图标下拉框数据
            this.request.get("/menu/icons").then(res => {
                this.options = res.data
            })
        }
    }
}
</script>

<style lang="scss" scoped>

</style>